<template>
	  <view class="mall_list">
		  <view v-for="goods in goodsDate" :key="goods.id">
			  <view class="malls" v-for="good in goods.goods" :key="good.id" >
			  	<image mode="aspectFill" :src="good.mainImg" class="malls_img" lazy-load="true" @click="toProductDetails(good.id)"></image>
			  	<view class="malls_text">
			  		<view class="malls_discount">{{good.discount}}折</view>
			  		<text>{{good.goodName}}</text>
			  	</view>
			  	<view class="malls_price">
			  		<text>￥{{good.sellingPrice}}</text>
			  	</view>
			  	<view class="Original_price">
			  		<text class="Original_price_text">￥{{good.originalPrice}}</text>
			  		<!-- <view class="line"></view> -->
			  	</view>
			  	<image src="../../static/images/shopping_car_03.png" class="malls_shopping_car" mode="aspectFill" lazy-load="true" @click="toShopCar(good.id)"></image>
			  </view>
		  </view>
		</view>
</template>
 
<script>
	export default {
		name:"productList",
		props:["goodsDate"],
		data() {
			return {
				sum:0
			};
		},
		onLoad() {
		},
		methods:{
			//跳转商品详情
			toProductDetails(id){
				uni.navigateTo({
					url:"../../productDetails/productDetails?id="+id
				})
			},
			//加入购物车
			toShopCar(id){
				uni.showLoading({
					title:"加入购物车中...",
					mask:true,
					duration:1000
				})
				let that=this;
				that.sum++
				uni.request({
					url: this.$store.state.URL+"goods/shopping_cart/add_shopping_cart",
					data: {
						token: this.$store.state.token,
						goodID: id,
						skuID: '',
						num: that.sum
					},
					success(res) {
						uni.hideLoading();
						that.sum=0;
						if(res.data.status==true){
							uni.showToast({
								title:"已加入购物车",
								duration:1000
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								duration:1000,
								icon:"none"
							})
						}
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mall_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-shrink: 0;
		padding: 0 20upx 10upx;
	}
  .malls{
  	background:#fff;
		width:347upx;
  	border-radius: 10upx;
  	margin:10upx 0;
		padding-bottom: 20upx;
  }
  .malls_img{
  	width:100%;
  	height:347upx;
  }
  .malls_shopping_car{
  	width:46upx;
  	height:46upx;
  	float: right;
  	margin-top:10upx;
  	margin-right: 15upx;
  }
  .malls_price{
  	display: inline;
  	margin-top:-10upx;
  }
  .malls_price text{
  	font-size:28upx;
  	color:#f2526f;
  	margin-right: 64upx;
  	margin-left:10upx;
  }
  .malls_text text{
  	 font-size:20upx;
  	 color:#333;
  	 line-height: 20px;
     height: 40px;
     overflow:hidden;
     text-overflow:ellipsis; 
  	 white-space: nowrap;
  	 padding:0 10upx;
  }
  .malls_discount{
  	font-size:20upx;
  	color:#f2526f;
  	display: inline-block;
  	height:30upx;
  	width:auto;
  	background:#fff;
  	border:1px solid #f2526f;
  	text-align: center;
  	margin-left:10upx;
  	border-radius: 8upx;
	padding:0 10upx;
  }
  .Original_price{
  	display: inline-block;
  	position: relative;
  }
  .line{
  	position:absolute;
  	top:30upx;
  	left:-30upx;
  	height:2upx;
  	width:50upx;
  	background:#b7b7b7;
  }
  .Original_price_text{
  	font-size:20upx;
  	color:#b7b7b7;
  	margin-left:-54upx;
  	margin-top: -1upx;
	text-decoration: line-through;
  }
</style>
